<script setup lang="ts">
import { type GridContainer } from "@/models/containers";
import Dynamic from "@/components/Dynamic.vue";
import { Component } from '@/models/component';


const props = defineProps<{ model: GridContainer }>()
const children = props.model.children as Component[]

const gridAreas = props.model.areas
const gridTemplateColumns = props.model.gridTemplateColumns



</script>

<template>
    <div class="grid-box" :data-tag="model.tag">
        <Dynamic :component="cp" v-for="cp in children"></Dynamic>
    </div>
</template>

<style scoped lang="less">
.grid-box {
    display: grid;
    grid-template-areas: v-bind(gridAreas);
    grid-template-columns: v-bind(gridTemplateColumns);
    gap: 0.8rem;
}
</style>